import React from 'react';
import styles from '@/pages/Organization/EmployeeManage/components/EmployeeCard/index.less';
import IconFont from '@/components/IconFont';
import { Modal, Tooltip } from 'antd';
import QRCode from 'qrcode-react';
import img from '@/assets/logo2.png';
import * as FileSaver from 'file-saver';
import 'canvas-toBlob';
import { eventTrack } from '@/utils/track';

/**
 * 员工信息头部 - 名片
 */
const ControlsItemVVCard = ({ employeeInfo, ...rest }) => {
    const qrCodeRef = React.useRef();

    const getQrCodeUrl = () => {
        const key = employeeInfo && employeeInfo.paramAfterEncrypt;
        let url = '';
        url = `${window.location.origin}/businessCard?key=${key}`;
        return url;
    };

    const scaleQrCode = (canvas, callback) => {
        const scaledCanvas = document.createElement('canvas');
        const context = scaledCanvas.getContext('2d');
        const size = 250;
        scaledCanvas.width = size;
        scaledCanvas.height = size;
        const image = new Image();
        image.onload = () => {
            context.drawImage(image, 0, 0, size, size);
            callback(scaledCanvas);
        };
        image.src = canvas.toDataURL('image/png');
    };

    // 下载二维码图片
    const downQrCode = () => {
        const canvas = qrCodeRef.current?.refs?.canvas;
        if (!canvas) return;
        scaleQrCode(canvas, scaledCanvas => {
            scaledCanvas.toBlob(blob => {
                FileSaver.saveAs(blob, `${employeeInfo.userName}_BusinessCard.png`);
            });
        });
    };

    const renderModalContent = () => (
        <div className={styles.codeModal}>
            <div className={styles.businessCard}>
                <div className={styles.cardTop}>
                    <div className={styles.info}>
                        <b
                            style={{
                                display: '-webkit-box',
                                WebkitBoxOrient: 'vertical',
                                WebkitLineClamp: 2,
                                overflow: 'hidden'
                            }}
                        >
                            {employeeInfo.employeeName}
                        </b>
                        <p
                            style={{
                                display: '-webkit-box',
                                WebkitBoxOrient: 'vertical',
                                WebkitLineClamp: 2,
                                overflow: 'hidden'
                            }}
                        >
                            {employeeInfo.administrativeOrganizationName}
                            {employeeInfo.positionName && ` - ${employeeInfo.positionName}`}
                        </p>
                    </div>
                </div>
                <div className={styles.footer}>
                    {employeeInfo && employeeInfo.mobile ? (
                        <span>
                            <i className="iconfont iconoa_icon_phone_default" />
                            {employeeInfo.areaCode}-{employeeInfo.mobile}
                        </span>
                    ) : (
                        ''
                    )}
                    {employeeInfo && employeeInfo.email ? (
                        <span>
                            <i className="iconfont iconoa_icon_email_default" />
                            {employeeInfo.email}
                        </span>
                    ) : (
                        ''
                    )}
                </div>
            </div>
            {employeeInfo && employeeInfo.paramAfterEncrypt ? (
                <div className={styles.qrcode}>
                    <div className={styles.code}>
                        <QRCode
                            ref={qrCodeRef}
                            size={250}
                            value={getQrCodeUrl()}
                            logo={img}
                            logoWidth={60}
                            logoHeight={60}
                        />
                    </div>
                    <div className={styles.qrcodeP}>使用社交类APP扫码，即可查看名片</div>
                    <a className={styles.qrcodeDown} onClick={() => downQrCode()}>
                        下载二维码图片
                    </a>
                </div>
            ) : (
                ''
            )}
        </div>
    );
    const handleShowModal = () => {
        eventTrack({
            eventName: 'personal_my_info_vcard_click',
            pageName: 'personal_my_info'
        });
        Modal.info({
            icon: null,
            title: '电子名片',
            content: renderModalContent(),
            centered: true,
            maskClosable: true,
            width: '640px'
        });
    };

    // render
    return (
        <>
            <Tooltip title="电子名片">
                <div className={styles.employeeControlsItem} onClick={handleShowModal} {...rest}>
                    <IconFont icon="iconinfos_namecard_icon_default3" />
                </div>
            </Tooltip>
        </>
    );
};

export default ControlsItemVVCard;
